<template>
  <div>
    <ez-row :gutter="20">
      <ez-col :span="3">
        <span>Using slots</span>
      </ez-col>
      <ez-col :span="10">
        <ez-input v-model="input3" placeholder="Pick a date">
          <template #suffix>
            <ez-icon name="calendar"></ez-icon>
          </template>
        </ez-input>
      </ez-col>
      <ez-col :span="10">
        <ez-input v-model="input4" placeholder="Type something">
          <template #prefix>
            <ez-icon name="search"></ez-icon>
          </template>
        </ez-input>
      </ez-col>
    </ez-row>

<!--    <ez-row>-->
<!--      <ez-col>2</ez-col>-->
<!--      <ez-col>2</ez-col>-->
<!--      <ez-col>3</ez-col>-->
<!--    </ez-row>-->
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const input3 = ref('')
  const input4 = ref('')
</script>
